<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

    <head th:include="include :: header"></head>
	<style>
		 .table > tbody > tr > td{text-align: center;}
	</style>
	<link th:href="@{/css/page.css}"
		  rel="stylesheet">

	<body class="gray-bg">
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>表单</h5>
						<!--<a class="pull-right" onclick="returnStep()" href="#"><h5>返回</h5></a>-->
						<a  class="pull-right" href="javascript:" onclick="self.location=document.referrer;"><h5>返回</h5></a>
					</div>
					<div class="ibox-content">
						<div class="table-responsive" id="content">
						<!--<table class="table table-bordered">-->
							<!--<tr >-->

							<!--</tr>-->
						<!--</table>-->
						</div>
						<div class="paging"></div>
					</div>
				</div>
			</div>
		</div>

		<div th:include="include::footer"></div>
	<script th:src="@{/js/page.js}"></script>
	<script type="text/javascript" th:inline="javascript">
		var page = [[${page}]];
        $().ready(function() {
            table()
			let paging = new Paging({
				total: page.total,
			});
			paging.options.container.addEventListener('click', function(e) {
				layer.load(1, {shade: false});
				$.get(getProjectName()+"/statistics/productPage",{pageNumber:paging.options.current,pageSize:10},function (result) {
					layer.closeAll();
					page = result;
					table();
				})
			})

		})

		function table() {
			$("#content").empty();
			var contentList = page.records;
		     // console.log(page)
            // var headList = result.head;
			var tableHtml = "<table class='table table-bordered'>"

			for (var i in contentList){
                tableHtml += "<tr>";
			    var content =  contentList[i];
			    for (var j in content){
			        var item  = content[j];
			        if (content[0]!='序号'){
						if (j>5){
							var itemValue = item;
							if (itemValue.attrValue > itemValue.max ){
								tableHtml+="<td><span style='color: #e7262a'>"+itemValue.attrValue+"</span>("+itemValue.min+"-"+itemValue.max+")</td>"
							}else if (itemValue.attrValue<itemValue.min){
								tableHtml+="<td><span style='color: #47DCE7'>"+itemValue.attrValue+"</span>("+itemValue.min+"-"+itemValue.max+")</td>"
							}else{
								tableHtml+="<td>"+itemValue.attrValue+"("+itemValue.min+"-"+itemValue.max+")</td>"
							}
						}else{
							tableHtml +="<td>"+ item +"</td>"
						}
					} else {
						tableHtml +="<td class='success'>"+ item +"</td>"
					}
				}
			    tableHtml +="</tr>"
			}
			$("#content").html(tableHtml)
        }

        function returnStep() {
            history.back(-1)
        }
	</script>
	</body>

</html>